<template>
  <div class="u-editor">
    <VueUeditorWrap
      ref="vueUeditorWrap"
      :key="editor_id"
      v-model="content"
      class="editor-input"
      :editor-id="editor_id"
      :config="config"
      mode="listener"
      @before-init="addCustomButtom"
      @ready="ready"
    ></VueUeditorWrap>

    <el-dialog
      v-if="uploadVideo"
      title="上传视频"
      :visible.sync="uploadVideo"
      width="300px"
      :append-to-body="true"
      @close="uploadVideo = false"
    >
      <div class="uploadContent">
        <uploadVideo @resultUpload="resultUpload">
        </uploadVideo>
        <span class="dialog-footer rowFlex updateVideo">
          <el-button
            class="btn"
            type="primary"
            @click="uploadConfirm"
          >确 定</el-button>
          <el-button
            class="btn"
            @click="uploadVideo = false"
          >取 消</el-button>
        </span>
        </uploadvideo>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import uploadVideo from './uploadVideo.vue'
import eldialog from '@/common/component/dialog.vue'

export default {
  name: 'BanManagementAddEditor',
  components: {
    VueUeditorWrap,
    eldialog,
    uploadVideo
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      Ueditor: '',
      VideoUrl: '',
      videoHeight: '',
      videoWidth: '',
      editor_id: `editor_id_${  new Date().getTime()}`,
      config: {
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: `${location.protocol  }//laravel.wanqudianchi.com/public/editor_cos_upload`,
        // serverUrl: import.meta.env.VITE_APP_BASE_API + '/admin/problem_answer/uploadFile?file_type=1&picture_format=png',
        toolbars: [
          ['source', 'undo', 'redo', 'image-button', '|', 'underline', 'justifyleft', 'justifyright', 'justifycenter', '|', 'simpleupload']
        ],
        zIndex: 100,
        // 初始容器宽度
        initialFrameHeight: 450,
        // 初始容器宽度
        initialFrameWidth: '100%',
        autoHeightEnabled: true,
        autoFloatEnabled: false,
        wordCount: false, // 是否开启字数统计
        elementPathEnabled: false, // 是否启用元素路径，默认是显示
        compressSide: 1,
        scaleEnabled: false,
        readonly: this.readonly
      },
      uploadVideo: false
    }
  },
  computed: {
    content: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  watch: {
    isSubmit(newVal, oldVal) {
      if (newVal) {
        // this.Ueditor.execCommand('inserthtml', ` <h1>3333</h1>`)
      }
    }
  },
  mounted() { },
  methods: {
    uploadConfirm() {
      if (this.VideoUrl.length === 0) {
        this.$message.warning('请上传视频')
        return
      }
      if (this.videoWidth <= 300 && this.videoHeight <= 350) {
        this.$message.warning('视频分辨率最小为 300 * 350')
        return
      }
      if (this.VideoUrl.length > 0) {
        this.Ueditor.execCommand('inserthtml', `<br><video controls style="width:${this.videoWidth}px;height:${this.videoHeight}px;">
      <source src="${this.VideoUrl}" type="video/mp4">
      </video><p><p/>`)
        this.uploadVideo = false
        this.VideoUrl = ''
      } else {

      }
    },
    resultUpload(value) {
      this.VideoUrl = value
      const videoObj = document.createElement('video')
      videoObj.preload = 'metadata'
      videoObj.src = this.VideoUrl
      videoObj.onloadedmetadata = (evt) => {
        URL.revokeObjectURL(this.VideoUrl)
        this.videoWidth = Math.ceil(videoObj.videoWidth / 2) // 获取视频的宽
        this.videoHeight = Math.ceil(videoObj.videoHeight / 2) // 获取视频的高
      }
    },
    addCustomButtom() {
      // window.UE.registerUI(
      //   'image-button',
      //   (editor, uiName) => {
      //     // 创建一个 button
      //     var btn = new window.UE.ui.Button({
      //       // 按钮的名字
      //       name: uiName,
      //       // 提示
      //       title: '添加素材库图片',
      //       // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
      //       cssRules: "background-image: url('/UEditor/themes/default/images/image.png') !important;background-size: cover;opacity: .5;",
      //       // 点击时执行的命令
      //       onclick: () => {
      //         // 这里可以不用执行命令，做你自己的操作也可
      //         // editor.execCommand(uiName)
      //         // console.log(this)
      //         this.uploadVideo = true
      //       }
      //     })
      //     // 因为你是添加 button，所以需要返回这个 button
      //     return btn
      //   },
      //   30
      // )

      window.UE.registerUI(
        'video-button',
        (editor, uiName) => {
          // 创建一个 button
          const btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: '添加腾讯视频',
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules: "background-image: url('/UEditor/themes/default/images/video.png') !important;background-size: cover;opacity: .5;",
            // 点击时执行的命令
            onclick: () => {
              // 这里可以不用执行命令，做你自己的操作也可
              // editor.execCommand(uiName)
              // console.log(this)
              this.uploadVideo = true
            }
          })
          // 因为你是添加 button，所以需要返回这个 button
          return btn
        },
        30
      )
    },
    ready(editorInstance) {
      this.Ueditor = editorInstance
      this.Ueditor.setHeight(500)
    },
    async uploadImg(params) {
      const result = await this.uploading(params.file)
      console.log(result, 'result')
      const url = `${result.host  }/${  result.finallName}`
      console.log(url, 'url')
      this.$emit('resultUpload', url)
    },
    focusInput() { }
  }
}
</script>
<style lang="scss">
.border_top_none {
  // .edui-default .edui-editor {
  //   border-top: none !important;
  // }
}
</style>
<style lang="scss" scoped>
.wang-editor {
  display: inline-block;
  width: 100%;
}
.uploadContent {
  height: 280px;
  .updateVideo {
    width: calc(100% - 40px);
    position: absolute;
  }
}
</style>

<style lang='scss'>
body {
  margin: 0;
  padding: 0;
}
.u-editor {
  height: 50%;
  position: relative;
  .placeholder-text {
    padding: 0 20px;
    margin: 10px 0;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
  }
}
</style>